<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>非药品收费项目管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="15">
        <el-col :span="10">
          <el-input placeholder="请输入内容" clearable v-model="queryInfo.query">
            <!-- 当点击搜索的时候调用方法getList查询数据 -->
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>

        <el-col :span="4">
          <!-- 添加按钮 -->
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            circle
            @click="addwindow = true"
          ></el-button>
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            v-show="multipleSelection!=null&&multipleSelection!=''"
          ></el-button>
<!-- ---------添加------------ -->
          <el-dialog
            title="添加非药品收费项目"
            :visible.sync="addwindow"
            :before-close="handleClose"
          >
            <el-form :model="addForm" ref="addForm">
              <el-form-item label="项目编码" :label-width="formLabelWidth" prop="itemcode">
                <el-input v-model="addForm.itemcode" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="项目名称" :label-width="formLabelWidth" prop="itemname">
                <el-input v-model="addForm.itemname" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="规格" :label-width="formLabelWidth" prop="format">
                <el-input v-model="addForm.format" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="单价" :label-width="formLabelWidth" prop="price">
                <el-input v-model="addForm.price" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="所属费用科目" :label-width="formLabelWidth" prop="expclassid">
                <template>
                  <el-select v-model="addForm.expclassid" clearable placeholder="请选择所属费用科目">
                    <el-option
                      v-for="item in expenseclasslist"
                      :key="item.id"
                      :label="item.expname"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </template>
              </el-form-item>
              <el-form-item label="执行科室" :label-width="formLabelWidth" prop="deptid">
                <template>
                  <el-select v-model="addForm.deptid" clearable placeholder="请选择执行科室">
                    <el-option
                      v-for="(item,index) in deptList"
                      :key="index"
                      :label="item.deptname"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </template>
              </el-form-item>
              <el-form-item label="创建时间" :label-width="formLabelWidth" prop="creationdate">
                <el-date-picker v-model="addForm.creationdate" type="date" readonly
                format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd HH:mm:ss" 
                ></el-date-picker>
                <!-- <el-date-picker 
                :clearable="true" v-model="info.stockDate" type="date" placeholder="选择日期" 
                format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd HH:mm:ss" :disabled="disabled"
                ></el-date-picker> -->
              </el-form-item>
              <el-form-item label="项目类型" :label-width="formLabelWidth" prop="recordtype">
                <template>
                  <el-select v-model="addForm.recordtype" >
                    <el-option
                      v-for="item in recordtypelist"
                      :key="item.rid"
                      :label="item.name"
                      :value="item.rid"
                    ></el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click=" addwindow = false;resetForm('addForm')">取 消</el-button>
              <el-button type="primary" @click="add()">确 定</el-button>
            </div>
          </el-dialog>
        </el-col>
      </el-row>
    </el-card>

    <el-table
      :data="tableData"
      style="width: 100%"
      border
      stripe
      :row-key="getRowKey"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" :reserve-selection="true"></el-table-column>
      <el-table-column label="编号" width="50px" type="index" align="center"></el-table-column>
      <el-table-column prop="itemcode" label="项目编码" align="center"></el-table-column>
      <el-table-column prop="itemname" label="项目名称" align="center"></el-table-column>
      <el-table-column prop="format" label="规格" align="center"></el-table-column>
      <el-table-column prop="price" label="单价" align="center"></el-table-column>
      <el-table-column prop="expenseClass.expname" label="所属费用科目" align="center"></el-table-column>
      <el-table-column prop="department.deptname" label="执行科室" align="center"></el-table-column>
      <el-table-column prop="mnemoniccode" label="拼音助记码" align="center"></el-table-column>
      <el-table-column prop="creationdate" label="创建时间" align="center"></el-table-column>
      <!--  value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" -->
      <el-table-column prop="lastupdatedate" label="最后修改时间" align="center"></el-table-column>
      <el-table-column prop="recordtype" label="项目类型" align="center" :formatter="dicatypeFormat"></el-table-column>

      <el-table-column label="操作" align="center" width="240px">
        <!-- slot-scope="scope" -->
        <!-- 修改按钮 -->
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-setting"
            size="mini"
            @click="dialogFormVisiblee=true;getConstantTypeById(scope.row.id)"
          >修改</el-button>
          <!-- 删除按钮  scope.row.id-->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deletetype(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1,2,5, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 修改页面scope.row.id -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisiblee">
      <el-form :model="addForm" ref="addForm">
        <el-form-item label="项目编码" :label-width="formLabelWidth" prop="constanttypecode">
          <el-input v-model="addForm.constanttypecode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" :label-width="formLabelWidth" prop="constanttypename">
          <el-input v-model="addForm.constanttypename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="规格" :label-width="formLabelWidth" prop="constanttypename">
          <el-input v-model="addForm.constanttypename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单价" :label-width="formLabelWidth" prop="constanttypename">
          <el-input v-model="addForm.constanttypename" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="所属费用科目" :label-width="formLabelWidth" prop="constanttypeid">
          <template>
            <el-select v-model="addForm.constanttypeid" clearable placeholder="请选择所属费用科目">
              <el-option
                v-for="item in recordtypelist"
                :key="item.id"
                :label="item.constanttypename"
                :value="item.id"
              ></el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="执行科室" :label-width="formLabelWidth" prop="constanttypeid">
          <template>
            <el-select v-model="addForm.constanttypeid" clearable placeholder="请选择执行科室">
              <el-option
                v-for="item in recordtypelist"
                :key="item.id"
                :label="item.constanttypename"
                :value="item.id"
              ></el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="拼音助记码" :label-width="formLabelWidth" prop="constanttypename">
          <el-input v-model="addForm.constanttypename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth" prop="constanttypename">
          <el-input v-model="addForm.constanttypename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最后修改时间" :label-width="formLabelWidth" prop="constanttypename">
          <el-input v-model="addForm.constanttypename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目类型" :label-width="formLabelWidth" prop="constanttypeid">
          <template>
            <el-select v-model="addForm.constanttypeid" clearable placeholder="请选择项目类型">
              <el-option
                v-for="item in recordtypelist"
                :key="item.rid"
                :label="item.name"
                :value="item.rid"
              ></el-option>
            </el-select>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click=" dialogFormVisiblee = false;resetForm('addForm')">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      multipleSelection: [],
      //科室集合//
      deptList:[],
      //非药品分类集合
      expenseclasslist:[],

      queryInfo: {
        //查询条件
        query: "",
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 5,
      },
      total: 0,
      tableData: [],
      //添加
      addForm: {
        itemcode: '',
        itemname: '',
        format:'',
        price:'',
        expclassid:'',
        deptid:'',
        recordtype:'',
        creationdate:this.getNowTime(),
      },
      updateForm: {},
      // 控制添加用户对话框的显示与隐藏
      dialogTableVisible: false,
      dialogFormVisiblee: false,
      addwindow: false,
      formLabelWidth: "130px",

      recordtypelist: [
        { rid: 1, name: "1-检查" },
        { rid: 2, name: "2-检验" },
        { rid: 3, name: "3-处置" },
      ],
    };
  },

  created() {
    this.getConstantTypeList();
    this.getDeptmentName();
    this.getExpenseClass()
  },

  methods: {
    ///////////////////////////// 网 页 加 载 前 执 行 ///////////////////////////////////
    //// 获取列表 ////

    async getConstantTypeList() {
      const { data: res } = await this.$http.get(
        "FmeditemController/allFmeditem",
        this.queryInfo
      );
      this.tableData = res.data;
      this.total = res.totalpage;
      console.log(res);
    },


    // 获取到Deptment科室列表
    async getDeptmentName() {
      const { data: res } = await this.$http.post("department/departmentList")

      console.log("------****-------");
      console.log(res);
      console.log("-----------------");
      
      if(res.meta.status!==200){
        return this.$message.error('加载失败:'+res.meta.msg);
      }
      // this.$message.success('加载成功');

      this.deptList = res.data
    },

    // 获取到expenseclass非药品收费名称列表
    async getExpenseClass() {
      const { data: res } = await this.$http.get("ExpenseClassController/expenseclasslist")

      console.log("------+++++-------");
      console.log(res);
      console.log("-----------------");
      
      if(res.meta.status!==200){
        return this.$message.error('加载失败:'+res.meta.msg);
      }
      // this.$message.success('加载成功');

      this.expenseclasslist = res.data
    },




    // 指定一个key标识这一行的数据
    getRowKey(row) {
      return row.id;
    },


    //数据格式化后台传入数据num通过判定得到前台定义数组的对应内容name等
    dicatypeFormat(row, column) {
      let typename;
      this.recordtypelist.forEach((value) => {
        if (row.recordtype == value.rid) {
          typename = value.name;
        }
      });
      return typename;
    },


    //处理默认选中当前日期
	    getNowTime() {
	       var now = new Date();
	       var year = now.getFullYear(); //得到年份
	       var month = now.getMonth(); //得到月份
	       var date = now.getDate(); //得到日期
	       var hour =" 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
	       month = month + 1;
	       month = month.toString().padStart(2, "0");
	       date = date.toString().padStart(2, "0");
	       var defaultDate = `${year}-${month}-${date}${hour}`;
	       console.log(defaultDate)
	       return defaultDate;
	       this.$set(this.info, "stockDate", defaultDate);
	    },

    // val表示选中的表格行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection)
    },
    /**
     * 批量删除
     */
    deleteall() {
      let list = [];
      for (let i in this.multipleSelection) {
        list[i] = this.multipleSelection[i].id;
      }
      console.log(list);
    },

    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pagesize = newSize;
      this.getConstantTypeList();
    },

    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.queryInfo.pagenum = newPage;
      this.getConstantTypeList();
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.resetForm("addForm");
        })
        .catch((_) => {});
    },
    /**
     * 重置表单
     */
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    
    /**
     * 通过id获取常数类别
     */
    async getConstantTypeById(id) {
      const { data: res } = await this.$http.get(
        "constanttypecontroller/getconstanttype",
        {
          params: { id: id },
        }
      );
      this.updateForm = res.data;
      // console.log(res.data)
    },
    /**
     * 添加
     */
    add() {
      this.$confirm("是否添加?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.resetForm("addForm");
          this.addwindow = false;

          this.getConstantTypeList();
        })
        .catch(() => {
          this.addwindow = false;
          this.$message({
            type: "info",
            message: "已取消添加",
          });
        });
    },
    /**
     * 删除
     */
    deletetype(id) {
      this.$confirm("此操作将执行删除操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getConstantTypeList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    /**
     * 修改
     */
    update(id) {
      this.$confirm("是否确认修改?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          this.dialogFormVisiblee = false;
          this.getConstantTypeList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
  },
};
</script>
    
<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}

.el-form-item {
  text-align: left;
}
</style>